<template>
     <div>
         <div class="close" @click="$router.push('/')">
            <i class="iconfont iconicon-test"></i>
        </div>
        <div class="logo">
            <i class="iconfont iconnew"></i>
        </div>
        <AuthInput 
        type="text" 
        placeholder="用户名/手机号码" 
        rule="^1[3456789]\d{9}$"
        errMsg="手机号码有误"
        @valChanged="setUserName" />
        <AuthInput 
        type="text" 
        placeholder="昵称" 
        rule="^[0-9a-zA-Z]{2,8}$"
        errMsg="昵称有误"
        @valChanged="setNickName" />
        <AuthInput 
        type="password" 
        placeholder="密码" 
        rule="^\d{6}$"
        errMsg="密码有误"
        @valChanged="setPassword"/>
        <div class="bai"></div>
        <AuthBtn btnTxt="注  册" @btnClicked="register" :isValid="isValid"/>
     </div>
</template>

<script>
import AuthInput from '@/components/AuthInput';
import AuthBtn from "@/components/AuthBtn";

export default {
    data(){
        return{
            username:'',
            nickname:'',
            password:'',
            isValid:true
        }
    },
    components:{
        AuthInput,
        AuthBtn
    },
    methods:{
       setUserName(username){
           this.username = username;
           this.testAllVal();
       },
       setNickName(nickname){
           this.nickname = nickname; 
           this.testAllVal();
       },
       setPassword(password){
           this.password = password;
           this.testAllVal();
       },
       testAllVal(){
            const regExpName = new RegExp(/^1[3456789]\d{9}$/);
            const regExpNick = new RegExp(/^[a-zA-Z0-9_-]{3,10}$/);
            const regExpPass = new RegExp(/^\d{6}$/);
            if(!regExpName.test(this.username) || 
               !regExpNick.test(this.nickname) || 
               !regExpPass.test(this.password)){
               this.isValid = false;
            }else{
                this.isValid = true;
            }
       },
       register(){
           if(!this.username || !this.nickname || !this.password){
                this.$toast.fail('请输入手机号，昵称或密码');
                return;
           }
           this.$axios({
               url:'/register',
               method:'post',
               data:{
                   username:this.username,
                   nickname:this.nickname,
                   password:this.password
               }
           }).then((res)=>{
               if(res.data.message == '注册成功'){
                  // 注册成功才去登录拿token    
                  this.toLogin();
               }
           });
       },
       toLogin(){//由于后台注册缺失token，注册后跳转登录功能
           this.$axios({
                url:'/login',
                method:'post',
                data:{
                    username:this.username,
                    password:this.password
                }
            }).then((res)=>{
                if(res.data.message != '登录成功'){
                    this.$router.replace('/login');
                    this.$toast.success('注册成功，请登录');
                }else{
                    // 本地储存
                    localStorage.setItem('token',res.data.data.token);
                    localStorage.setItem('userId',res.data.data.user.id);
                    // 跳转到首页
                    this.$router.replace('/');
                    this.$toast.success('注册成功');
                }
            
            })
       }
    }
}
</script>

<style lang="less" scoped>
.close{
    padding:6.667vw;//24
    .iconicon-test{
        font-size: 7.5vw;
        color: #c0c0c0;
    }
}
.logo{
    height: 27.778vw;
    line-height: 27.778vw;
    text-align: center;
    .iconnew{
        font-size: 36.111vw;
        color: #ffc0cb;
    }
}
//deep css 深度选择器, 可以穿透 scoped 范围限制
/deep/ .btnWapper {
   margin:8.333vw 0;
 }
</style>